<template>
  <div>
      <head-top></head-top>
      <div class="appContainer">
        <Menu class="menuBox" @addTab='addTab'></Menu>
        <el-tabs 
          v-model="editableTabsValue" 
          type="card" 
          closable 
          @tab-remove="removeTab" 
          :before-leave="changeTab"
          class="appTab"
          style="margin-left:.1rem;width:85%;background:#fff">
          <el-tab-pane
            v-for="(item, index) in editableTabs"
            :key="index"
            :label="item.title"
            :name="item.name"
          >
          </el-tab-pane>
        </el-tabs>
        <router-view style="margin-top:.24rem"></router-view>
      </div>
  </div>
</template>
<script>
const router = {
  '活动设置':'ActSettings',
  '优惠分组配置':'Group',
  '优惠券统计':'Discount',
  '红包统计':'RedTotal',
  '实物礼品统计':'Gift',
  '活动优惠券统计':'ActStatistics',
  '活动红包统计':'ActRed',
  '待办事项':'News',
  '活动统计':'ActStatement'
}
import HeadTop from '_components/HeadTop'
import Menu from '_components/MenuSys'
// import Menu from '_components/Menu'
import Bus from '@/bus.js'

export default {
  components:{
    HeadTop,
    Menu
  },
  data(){
    return {
      editableTabsValue: '',
      editableTabs:[],
      tabIndex: 0,
      tabNames:[]
    }
  },
  created(){
    let that = this
    this.resize()
    Bus.$off('addTab')
    Bus.$on('addTab',(val)=>{
        that.addTab(val)
    })
    Bus.$off('selectTabAct')
    Bus.$on('selectTabAct',(data)=>{
        that.selectTab(data)
    })
  },
  methods:{
    //适配，设置html的font-size
    resize(){
      var width = window.screen.width;
      var win = window
      var doc = document
      if(width > 1200) {
        //resize
        var docEl = doc.documentElement,
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
          recalc = function() {
            var clientWidth = docEl.clientWidth;
            docEl.style.fontSize = 192 * (clientWidth / 1920) + 'px';
          };
        if(!doc.addEventListener) {
          return;
        }
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);

      } else {
        $("html").css("font-size", "62.5px");
      }
    },
    removeTab(targetName){
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        this.tabNames.splice(this.tabNames.findIndex(item => item === targetName), 1)
    },
    addTab(item){
      let title = ''
      //TODO:暂时兼容新版menu处理
      if(typeof(item) == 'object'){
        title = item.text
      }else{
        title = item
      }
      if(!this.tabNames.includes(title)){
        this.editableTabs.push({
          title: title,
          name: title
        });   
        this.tabNames.push(title)  
      }else{
        this.editableTabs.push({
          title: title,
          name: title
        });
        this.tabNames.push(title)
      }
      this.editableTabsValue = title;
    },
    changeTab(n,o){
      this.editableTabsValue = n
      this.$router.push({
        name:router[n]
      })
      // this.$router.push('/'+router[n])
    },
    selectTab(data){//选择标签,关闭当着标签
      let isHas = false
      for(let i=0;i<this.editableTabs.length;i++){
        if(this.editableTabs[i].name === data.newTab){
          isHas = true
          break;
        }else{
          isHas = false
        }
      }

      if(!isHas){
        this.editableTabs.push({
          title:data.newTab,
          name:data.newTab
        })
        this.tabNames.push(data.newTab)
      }
      this.editableTabsValue = data.newTab
    }
  }
}
</script>

